<template>
  <body id="register_page">
    <el-form class="login-container" label-position="left" label-width="0px">
    <h3 class="register_title">商家注册</h3>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item class="label" label="商家名" prop="merchantname">
        <el-input class="input" v-model="ruleForm.merchantname"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input class="input" v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input class="input" type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassWord">
        <el-input class="input" type="password" v-model="ruleForm.checkPassWord" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input class="input" v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button type="primary" plain @click="toMerchantLogin">已有账户，点我登录</el-button>
      </el-form-item>
    </el-form>
  </el-form>
  </body>
</template>

<script>
  import {merchantRegister} from "@/api/merchant"
  export default {
    name: 'MerchantRegister',
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          merchantname: '',
          phone: '',
          password: '',
          checkPassWord: '',
          email: '',
        },
        rules: {
          merchantname: [
            {required: true, message: '请输入商家名', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {min: 11, max: 11, message: '长度必须为11位', trigger: 'blur'}
          ],
          password: [
            {validator: validatePass, required: true, message: '请输入密码', trigger: 'blur'},
            {min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur'}
          ],
          email: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
            {min: 8, message: '长度最少 8 个字符', trigger: 'blur'}
          ],
          checkPassWord: [
            {validator: validatePass2, required: true, trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          //如果前台校验表单无问题，则提交
          if (valid) {
            merchantRegister({
              mname: this.ruleForm.merchantname,
              mphone: this.ruleForm.phone,
              mpassword: this.ruleForm.password,
              memail: this.ruleForm.email
            }).then(result => {
                if (result.data.code === 200) {
                  this.$message.success('注册成功');
                  this.$router.replace({path: '/MerchantLogin'})
                } else if (result.data.code === 401) {
                  this.$message.error('注册失败，用户已存在');
                } else {
                  this.$message.error('注册失败,请重新注册');
                }
              })
              .catch(result => {
                this.$message.error('因系统原因注册失败，请重试');
              })
          } else {
            this.$message.error('注册失败，请填写完整信息');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      toMerchantLogin() {
        this.$router.replace({path: '/'})
      }
    },
  }
</script>

<style scoped>
/*#register_page{
  margin-top: 100px;
  margin-left: 50px;
  margin-right: 50px;
  height: 100%;
  width:90%;

}
  body{
    margin: 0px;
  }

.login-container {
  border-radius: 15px;
  background-clip: padding-box;
 !* margin: 50px auto 50px 320px;
  width: 700px;
  padding: 35px 35px 15px 35px;*!
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;

}*/
  #register_page{
    background-color: white;
    width: 100%;
    height: 100%;
  }
  .login-container{
    height: 100%;
    width: 80%;
    padding-top: 2%;
    padding-left: 10%;
  }

</style>
